<template>
  <div class="kbody">
    <div @click="returnBack()" style="margin-bottom: 10%" class="back">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-left" />
      </svg>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h2 style="text-align: center" class="login">欢迎登录</h2>
    <br />
    <el-row style="margin: 0 20%">
      <el-input placeholder="账号" :prefix-icon="User" v-model="schNo" />
    </el-row>
    <el-row style="margin: 5% 20%">
      <el-input placeholder="密码" :prefix-icon="Lock" v-model="pswd" type="password" show-password />
    </el-row>
    <el-row >
      <el-button type="primary" @click="login(schNo, pswd)" class="anniu">登录</el-button>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      schNo: "",
      pswd: ""
    };
  },
  methods: {
    //登录函数
    async login(schNo, pswd) {
      //后端的url
      var login_form= new FormData()
      login_form.append("sch_No",this.schNo)
      login_form.append("password",this.pswd)
      const res = await axios.post("http://8.130.46.21:8000/shells/login/", login_form);
      setTimeout(() => {
        if (res.data.pass == "true") {
          window.localStorage.setItem("user", JSON.stringify(res.data));
          this.$message.success("登录成功");
          setTimeout(() => {
            //改为跳转到Home
           window.location.replace("../src/pages/Home/Home.html")
          }, 1000);
        } else {
          this.$message.error("登录失败,账号或密码错误");
        }
      }, 200);
    },
    //返回上一页
    returnBack() {
      this.$router.push("/");
    }
  }
};
</script>
<script setup>
//仅做引入icon用
import { User, Lock } from "@element-plus/icons-vue";
</script>
<style scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: white;
  overflow: hidden;
}
.kbody {
  margin: auto;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/textfreebgp.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: auto;
}

.login {
  color: #e1d3d3;
}

.back {
  font-size: 20px;
  margin-top: 5px;
}
.anniu{
  width: 30%;
  height: 40px;
  margin-left: 35%;
  font-size: 18px;
  font-weight: bold;
  border-radius: 20px;
}
</style>
